<template>
  <div id="wzp-Logistics" class="page-content">
    <FloatImgBtn @onFloatBtnClicked="Screen" :text="text"></FloatImgBtn>
    <div class="main-header">
      <div class="mh-left">
        <dv-decoration-8 style="width: 300px; height: 50px" />
      </div>
      <div class="mh-middle">
        <div class="header-title">物流分析中心</div>
        <div class="decoration-textline">
          <dv-decoration-5 style="width: 100%; height: 40px" />
        </div>
      </div>
      <div class="mh-right">
        <dv-decoration-8 :reverse="true" style="width: 300px; height: 50px" />
      </div>
    </div>
    <dv-border-box-8
      key="wzp-logistics-chart-container"
      style="height: 100%; min-width: 100%; overflow: hidden"
    >
      <div class="main-container">
        <div class="left-chart-container">
          <div class="left-top">
            <dv-border-box-1>
              <Left-Chart-1 />
            </dv-border-box-1>
          </div>
          <div class="left-bottom">
            <dv-border-box-1>
              <Left-Chart-2 />
            </dv-border-box-1>
          </div>
        </div>
        <div class="middle-chart-container">
          <dv-border-box-1 key="98127395937218923">
            <Center-Cmp />
          </dv-border-box-1>
        </div>
        <div class="right-chart-container">
          <div class="right-top">
            <dv-border-box-11 title="交易数省份统计" key="6398712983712">
              <Right-Chart-1 />
              </dv-border-box-11>
          </div>
          <div class="right-bottom">
            <dv-border-box-11 title="交易数城市统计" key="21893723412124">
              <Right-Chart-2 />
              </dv-border-box-11>
          </div>
        </div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<script>
import LeftChart1 from "@components/LeadershipPositions/Logistics/LeftChart1";
import LeftChart2 from "@components/LeadershipPositions/Logistics/LeftChart2";

import CenterCmp from "@components/LeadershipPositions/Logistics/CenterCmp";

import RightChart1 from "@components/LeadershipPositions/Logistics/RightChart1";
import RightChart2 from "@components/LeadershipPositions/Logistics/RightChart2";
import FloatImgBtn from "../../components/LeadershipPositions/Consumption/FloatImgBtn";
import { fullScreen, exitFullScreen } from "../../utils/fullScreen";
export default {
  name: "Logistics",
  components: {
    LeftChart1,
    LeftChart2,
    CenterCmp,
    RightChart1,
    RightChart2,
    FloatImgBtn,
  },
  data() {
    return {
      text: "点击全屏",
    };
  },
  methods: {
    Screen() {
      if (this.text == "点击全屏") {
        fullScreen(document.getElementById("wzp-Logistics"));
        this.text = "返回";
      } else {
        exitFullScreen(document.getElementById("wzp-Logistics"));
        this.text = "点击全屏";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#wzp-Logistics {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #030409;
  color: #fff;
  background-image: url("../../assets/image/bg.png");
  // background-size: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 3px blue;

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mh-middle {
      flex: 2;
      font-size: 30px;
      position: relative;
      text-align: center;
      color: #096dd9;
      .decoration-textline {
        width: 100%;
        position: absolute;
        bottom: -15px;
        left: -50%;
        transform: translate3d(50%, 0, 0);
      }
    }
    .mh-left,
    .mh-right {
      flex: 1;
    }
  }
  >>> .border-box-content {
    width: 100%;
    min-height: 100%;
  }
  .main-container {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    .left-chart-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      .left-top {
        flex: 2;
        flex-grow: 0;
      }
      .left-bottom {
        flex: 1;
        flex-grow: 0;
      }
    }
    .middle-chart-container {
      // flex: 2;
      width: 50%;
      // flex-grow:0;
    }
    .right-chart-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      .right-top,
      .right-bottom {
        flex: 1;
        flex-grow: 0;
        flex-basis: 100%;
      }
    }
  }
}
</style>
